<script setup lang="ts">
import { useRouter } from "vue-router";
import { useDetails } from "./useDetails";
import navBar from "../../components/layout/navBar.vue"

const { riskDetails,  } = useDetails()

const router = useRouter();
const back = async (values: any) => {
    router.go(-1)
}
</script>
<template>
    <div>
        <navBar left="Y" right="N" title="项目详情"></navBar>
    </div>
    <div class="content">
        <div class="titleBar">
            <h1 class="name">xxxxx</h1>
            <div class="tag">
                <van-tag class="tag" type="primary">待核销</van-tag>
            </div>
        </div>
        <van-steps direction="vertical" active-color="#38f">
            <van-step v-for="riskDetail in riskDetails">
                <div class="time">{{riskDetail.findTime}}</div>
                <van-swipe :loop="false" :height="200" :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in riskDetail.images" :key="image">
                        <img style="height: 200px;" :src="image" />
                    </van-swipe-item>
                </van-swipe>

                <div class="showRight">
                    <div class="riskList">
                        <div class="field">隐患等级：</div>
                        <div class="text">{{riskDetail.latentGrade}}</div>
                    </div>
                    <div class="riskList">
                        <div class="field">隐患部位：</div>
                        <div class="text">2</div>
                    </div>
                    <div class="riskList">
                        <div class="field">建议整改时间：</div>
                        <div class="text">3</div>
                    </div>
                </div>
            </van-step>

        </van-steps>
    </div>
</template>
<style scoped>
.navbar {
    background: url(../../../public/assets/projectPhotos/background.png);
}

.content {
    margin: 5px 20px 20px 20px;
}
.showRight {
    width: 100%;
}
.time {
    font-size: 16px;
    font-weight: bolder;
}
.field {
    color: rgba(48, 61, 78);
    line-height: 15px;
    font-size: 14px;
    /* font-weight: bolder; */
}
.text {
    font-size: 14px;
    color: rgba(89, 89, 89);
    line-height: 16px;
}
.riskList {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
}
.titleBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(202, 199, 199, 0.26);
}
.name {
    font-size: 18px;
}
.tag {
    padding: 3px 7px 3px 7px;
}
</style>